<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0" id="list" lay-title="会员详情" style="height: 500px; overflow: auto">
    <div class="layui-fluid" style="height: 500px;>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-form">

                    <table class="layui-table" id="detail">

                    </table>
                </div>


            </div>
        </div>
    </div>
</div>
<script id="detail_tpl" type="text/html">
    <colgroup>
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
    </colgroup>

    <tr>
        <th>姓名</th>
        <td>{{d.real_name }}</td>
        <th>性别</th>
        <td> {{#  if(d.sex === 1){ }}
            男
            {{#  } else if(d.sex === 2) { }}
            女
            {{#  } else if(d.sex === 0) { }}
            保密
            {{#  } }}
        </td>
        <th>身份证</th>
        <td>{{d.card_id }}</td>

    </tr>

    <tr>
        <th>余额</th>
        <td>{{d.money }}</td>
        <th>消费总额</th>
        <td>{{d.sume_sum }}</td>
        <th>注册日期</th>
        <td>{{d.create_time }}</td>

    </tr>
    <tr>
        <th>手机号</th>
        <td>{{d.tel }}</td>
        <th>地址</th>
        <td colspan="3">{{#  if(d.school_name){ }}
            {{d.school_name}}-{{d.institute_name}}-{{d.majors_name}}-{{d.grade_name}}-{{d.class_name}}班-{{d.dormitory_name}}-{{d.tung_name}}-{{d.room_name}}
            {{#  } else{ }}
            暂无填写
            {{#  } }}</td>
    </tr>
    <tr style="height: 500px">
        <th>充值记录</th>
        <td colspan="5" id="rechord_list" >
            <table style="width: 100%">
                <thead>
                <tr>
                    <th>充值金额</th>
                    <th>赠送金额</th>
                    <th>充值时间</th>
                </tr>
                </thead>
                <tbody style="height:100px">
                {{#  layui.each(d.recharge_list, function(index, item){ }}
                {{# if(Math.ceil((index+1)/d.recharge_page_size)==1){}}
                <tr page={{ Math.ceil((index+1)/d.recharge_page_size)}}>
                {{# }else{ }}
                <tr page={{ Math.ceil((index+1)/d.recharge_page_size)}} style='display:none'>
                {{# } }}

                    <td>{{ item.pay_money }} </td>
                    <td>{{ item.give_money }}</td>
                    <td>{{ item.pay_time }}</td>
                </tr>
                {{#  }); }}
                {{#  if(d.recharge_list.length === 0){ }}
                <tr> <td colspan="3">无数据</td></tr>


                {{#  } }}
                </tbody>
            </table>
            <span>
                 {{#
                for(var i=1;i<=d.recharge_page;i++){ }}
                {{# if(i==1){}}
                 <a style="" class="on">{{i}}</a>
                {{# }else{}}
                 <a style="" >{{i}}</a>
                {{# } }}
                {{# } }}
            </span>
        </td>
    </tr>
    <tr style="height: 500px">
        <th>酒店消费记录</th>
        <td colspan="5" id="hote_use_list" >
            <table style="width: 100%">
                <thead>
                <tr>
                    <th>酒店</th>
                    <th>设备id</th>
                    <th>支付时间</th>
                    <th>时间（h）</th>
                    <th>费用</th>

                </tr>
                </thead>
                <tbody style="height:100px">
                {{#  layui.each(d.hote_use_list, function(index, item){ }}
                {{# if(Math.ceil((index+1)/d.recharge_page_size)==1){}}
                <tr page={{ Math.ceil((index+1)/d.recharge_page_size)}}>
                {{# }else{ }}
                <tr page={{ Math.ceil((index+1)/d.recharge_page_size)}} style='display:none'>
                {{# } }}
                <td>{{ item.hotel_name }}</td>
                <td>{{ item.device_id }} </td>
                <td>{{ item.pay_time }}</td>
                <td>{{ item.use_time }} </td>
                <td>{{ item.total_money }}</td>

                </tr>
                {{#  }); }}
                {{#  if(d.hote_use_list.length === 0){ }}
                <tr> <td colspan="5">无数据</td></tr>
                {{#  } }}
                </tbody>
            </table>
            <span>
                 {{#
                for(var i=1;i<=d.hote_use_page;i++){ }}
                {{# if(i==1){}}
                 <a style="" class="on">{{i}}</a>
                {{# }else{}}
                 <a style="" >{{i}}</a>
                {{# } }}
                {{# } }}
            </span>
        </td>
    </tr>
    <tr style="height: 500px">
        <th>校园消费记录</th>
        <td colspan="5" id="consume_list" >
            <table style="width: 100%">
                <thead>
                <tr>
                    <th>设备id</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>消费总金额</th>
                    <th>赠送金额</th>
                </tr>
                </thead>
                <tbody style="height:100px">
                {{#  layui.each(d.consume_list, function(index, item){ }}
                {{# if(Math.ceil((index+1)/d.consume_page_size)==1){}}
                <tr page={{ Math.ceil((index+1)/d.consume_page_size)}}>
                {{# }else{ }}
                <tr page={{ Math.ceil((index+1)/d.consume_page_size)}} style='display:none'>
                {{# } }}
                <td>{{ item.device_id }} </td>
                <td>{{ item.start_time }}</td>
                <td>{{ item.end_time }} </td>
                <td>{{ item.consume_amount }}</td>
                <td>{{ item.credit_amount }}</td>
                </tr>
                {{#  }); }}
                {{#  if(d.consume_list.length === 0){ }}
                <tr> <td colspan="5">无数据</td></tr>
                {{#  } }}
                </tbody>
            </table>
            <span>
                 {{#
                for(var i=1;i<=d.consume_page;i++){ }}
                {{# if(i==1){}}
                 <a style="" class="on">{{i}}</a>
                {{# }else{}}
                 <a style="" >{{i}}</a>
                {{# } }}
                {{# } }}
            </span>
        </td>
    </tr>
    <tr style="height: 500px">
        <th>校园包机记录</th>
        <td colspan="5" id="charter_list" >
            <table style="width: 100%">
                <thead>
                <tr>
                    <th>设备id</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>消费金额</th>

                </tr>
                </thead>
                <tbody style="height:100px">
                {{#  layui.each(d.charter_list, function(index, item){ }}
                {{# if(Math.ceil((index+1)/d.charter_page_size)==1){}}
                <tr page={{ Math.ceil((index+1)/d.charter_page_size)}}>
                {{# }else{ }}
                <tr page={{ Math.ceil((index+1)/d.charter_page_size)}} style='display:none'>
                {{# } }}
                <td>{{ item.device_id }} </td>
                <td>{{ item.start_time }}</td>
                <td>{{ item.end_time }} </td>
                <td>{{ item.price_total }}</td>

                </tr>
                {{#  }); }}
                {{#  if(d.charter_list.length === 0){ }}
                <tr> <td colspan="4">无数据</td></tr>
                {{#  } }}
                </tbody>
            </table>
            <span>
                 {{#
                for(var i=1;i<=d.charter_page;i++){ }}
                {{# if(i==1){}}
                 <a style="" class="on">{{i}}</a>
                {{# }else{}}
                 <a style="" >{{i}}</a>
                {{# } }}
                {{# } }}
            </span>
        </td>
    </tr>
    </script>
<style  type="text/css">
    th {
        background-color: #f1f1f1;
        text-align: center !important;
    }
  td,th {
      text-align: center !important;
      height: 30px !important;
      /*line-height: 30px !important;*/
      padding: 1px;
    }
  a {
      margin-right: 4px;
  }
   span .on{
      color: #FF5722;
       font-weight: bolder;
  }
</style>
<script>
    layui.use(['table','laytpl'], function(){

        var table = layui.table,
            form = layui.form,
            laytpl=layui.laytpl,
            $ = layui.$,laydate=layui.laydate;

        layui.admin.ajax('members/member_detail',{member_id:layui.admin.member.member_id},1).then(function(res){
            var data=layui.admin.member;
            data.recharge_list=res.data.recharge_list;
            data.recharge_page_size=res.data.recharge_page_size;
            data.recharge_page=res.data.recharge_page;
            data.sume_sum=res.data.sume_sum;
            data.consume_list=res.data.consume_list;
            data.consume_page_size=res.data.consume_page_size;
            data.consume_page=res.data.consume_page;

            data.hote_use_list=res.data.hote_use_list;
            data.hote_use_page_size=res.data.hote_use_page_size;
            data.hote_use_page=res.data.hote_use_page;

            data.charter_list=res.data.charter_list;
            data.charter_page_size=res.data.charter_page_size;
            data.charter_page=res.data.charter_page;

            var getTpl = detail_tpl.innerHTML
                ,view = document.getElementById('detail');
            laytpl(getTpl).render(data, function(html){
                view.innerHTML = html;
            });
            $("span").on('click',"a",function(){
                if ($(this).hasClass('on')) return false;
                $(this).parent().find("a").removeClass('on');
                $(this).addClass('on');

                var page=$(this).text();
                $(this).parent().prev().find('tbody').find('tr').hide();
                $(this).parent().prev().find('tbody').find("tr[page='"+page+"']").show();
            });
        });

    });
</script>
